.User{
    display        : flex;
    justify-content: space-between;
    margin-top     : 30px;
    div
    {
        box-sizing: border-box;
    }
    .SideNavi
    {
        display         : flex;
        flex-direction  : column;
        background-color: white;
        box-shadow      : 0 2px 10px 0 rgb(57 106 255 / 5%);
        box-sizing      : border-box;
        margin-right    : 10px;
        >span
        {
            padding   : 10px 5px;
            text-align: center;
        }
        .Avatar
        {
            display        : flex;
            justify-content: center;
            padding        : 20px;
        }
    }
    .User_MainContent
    {
        width           : 900px;
        padding         : 20px;
        display         : flex;
        justify-content : center;
        background-color: white;
        box-shadow      : 0 2px 10px 0 rgb(57 106 255 / 5%);
        .U_EditUserInfo
        {
            display        : flex;
            justify-content: space-between;
            flex-wrap      : wrap;
            padding        : 20px;
            .UserInfoOption
            {
                width         : 100%;
                display       : flex;
                flex-direction: row-reverse;
            }
            .ant-form-item
            {
                flex-direction: column;
                .ant-form-item-label
                {
                    display: flex;
                    >label
                    {
                        color: #9fabcb;
                    }
                }
                .ant-form-item-control-input-content{
                    >label
                    {
                        display         : inline-block;
                        height          : 31px;
                        width           : 250px;
                        line-height     : 31px;
                        background-color: #f7f9fb;
                        box-sizing      : border-box;
                        padding-left    : 10px;
                    }
                }
            }
            .ant-form-inline .ant-form-item
            {
                width: 250px !important;
            }
        }
        .U_ArticleManage
        {
            width: 100%;
            .U_ListItem
            {
                display        : flex;
                justify-content: space-between;
                .ant-list-item
                {
                    width        : 900px;
                    padding-right: 40px;
                    .ant-list-item-extra
                    {
                        >img
                        {
                            width : 272px;
                            height: 168px;
                        }
                    }
                }
            }

        }
        .U_UserRents
        {
            box-sizing: border-box;
            padding   : 0 50px;
            width     : 100%;
            height    : 100%;
            .UserRentInfo
            {
                width         : 100%;
                height        : 100%;
                box-sizing    : border-box;
                padding       : 10px;
                display       : flex;
                flex-direction: column;
                border-radius : 5px;
                transition    : all ease-out .4s;
                &:hover
                {
                    box-shadow    : 0 0 10px rgba(1,1,1,.2);
                }
                .RentTitleAndAction
                {
                    display       : flex;
                    flex-direction: column;
                    .R_Title
                    {
                        display        : flex;
                        font-size      : 30px;
                        font-weight    : bold;
                        justify-content: space-between;
                        align-items    : center;
                        .ant-tag
                        {
                            margin: 0 0 0 5px;
                        }
                        >div{display: flex;align-items: center;}
                        button{margin-right: 10px;}
                    }
                    .R_Actions
                    {
                        display       : flex;
                        flex-direction: row;
                        align-items   : center;
                    }
                }
                .RrentDate
                {
                    width          : 100%;
                    display        : flex;
                    flex-direction : row;
                    justify-content: space-between;
                    align-items    : center;
                    >div
                    {
                        display       : flex;
                        flex-direction: column;
                        .Date_Description
                        {
                            font-size    : 15px;
                            color        : #C5C5C5;
                            margin-bottom: 5px;
                        }
                        .Date_Info
                        {
                            font-size  : 20px;
                            font-weight: bold;
                            display    : flex;
                            color      : #303030;
                            >span
                            {
                                font-size   : 12px;
                                margin-right: 5px;
                            }
                        }
                    }
                }
                .CostDetail
                {
                    display       : flex;
                    flex-direction: column;
                    .ant-divider
                    {
                        margin: 12px;
                    }
                    & >div:nth-child(1){
                        span:nth-child(4){
                           color: #52c41a;
                        }
                        .ant-btn-primary
                        {
                            background-color: #52c41a;
                            border-color    : #52c41a;
                        }
                        .ant-progress-bg
                        {
                            background-color: #52c41a;
                        }
                    }
                    & >div:nth-child(3){
                        .ant-btn-primary
                        {
                            background-color: #1890ff;
                            border-color    : #1890ff;
                        }
                        .ant-progress-bg
                        {
                            background-color: #1890ff;
                        }
                    }
                    & >div:nth-child(5){
                        .ant-btn-primary
                        {
                            background-color: #fa8c16;
                            border-color    : #fa8c16;
                        }
                        .ant-progress-bg
                        {
                            background-color: #fa8c16;
                        }
                    }
                    & >div:nth-child(7){
                        .ant-btn-primary
                        {
                            background-color: #d9d9d9;
                            border-color    : #d9d9d9;
                        }
                        .ant-progress-bg
                        {
                            background-color: #d9d9d9;
                        }
                    }
                    .CostItem
                    {
                        display        : flex;
                        flex-direction : row;
                        align-items    : center;
                        justify-content: space-between;
                        >button
                        {
                            border-radius: 10px;
                        }
                        & span:nth-child(2){
                            color: #A4A4A4;
                            width: 60px;
                        }
                        & div:nth-child(4){
                            color         : #030303;
                            font-weight   : bold;
                            font-size     : 14px;
                            width         : 120px;
                            display       : flex;
                            flex-direction: row;
                            align-items   : center;
                        }
                        .ant-progress
                        {
                            width: 500px;
                            .ant-progress-outer
                            {
                                padding-right: 0;
                            }
                            .ant-progress-text
                            {display: none;}
                        }
                    }
                    .EchartsArea
                    {
                        width     : 100%;
                        height    : 300px;
                        margin-top: 20px;
                    }
                }
                .RenewalRecord
                {
                    width: 100%;
                }
                .FurnitureState
                {
                    width          : 100%;
                    display        : flex;
                    flex-direction : row;
                    flex-wrap      : wrap;
                    justify-content: space-between;
                    .FurnitureItem
                    {
                        >label
                        {
                            display        : inline-flex;
                            flex-direction : column;
                            justify-content: center;
                            align-items    : center;
                            font-weight    : bold;
                            user-select    : none;
                            img
                            {
                                width : 45px;
                                height: 45px;
                            }
                        }
                        input[type="checkbox"]
                        {
                            display: none;
                        }
                        input[type="checkbox"]:checked +label
                        {
                            color: lightgray;
                        }
                        input[type="checkbox"]:checked + label>img:nth-child(2)
                        {
                            display: none;
                        }
                        input[type="checkbox"]:not(:checked) + label>img:nth-child(1)
                        {
                            display: none;
                        }
                        input[type="checkbox"]:checked~.StateIcon
                        {
                            display: none;
                        }
                        input[type="checkbox"]:not(:checked)~.StateIconError
                        {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}
.U_RepairOrder
{
    width : 100%;
    height: 100%;
    .ant-table-cell:nth-child(4)
    {
        max-width    : 150px;
        overflow     : hidden;
        white-space  : nowrap ;
        text-overflow: ellipsis;
    }
    // .ant-table-cell:nth-child(3)
    // {
    //     max-width    : 100px;
    //     overflow     : hidden;
    //     white-space  : nowrap ;
    //     text-overflow: ellipsis;
    // }
}
.RentTip
{
    width         : 300px;
    height        : 400px;
    background    : white;
    display       : flex;
    flex-direction: column;
    ul
    {
        width : 100%;
        height: 100%;
        li
        {
            width      : 100%;
            height     : 70px;
            padding    : 15px 10px;
            display    : flex;
            align-items: center;
            >div
            {
                margin-left: 20px;
                div:nth-child(2)
                {
                    font-size: 12px;
                    font-weight: lighter;
                }
            }
            img
            {
                width : 32px;
                height: 32px;
            }
        }
    }
    >div
    {
        width          : 100%;
        height         : 40px;
        border-top     : 1px solid #f8f9ff;
        display        : flex;
        flex-direction : row;
        justify-content: space-around;
        .ant-divider-vertical
        {
            height: 100%;
        }
    }
}
.HouseContract
{
    width : 900px;
    margin: 0 auto;
    .ContractHeader
    {
        position: relative;
    }
    .ContractContent
    {
        position   : relative;
        font-weight: bold;
        >p
        {
            margin-bottom: 0;
        }
        .ContractItem
        {
            .ContractItemTitle
            {
                font-weight: bolder;
            }
            >p
            {
                margin-bottom: 0;
            }
            margin-bottom: 10px;
        }
        .Part1
        {
            >p:nth-last-child(4)
            {
                display: flex;
                gap    : 5px;
            }
            >p:nth-last-child(1)
            {
                >p
                {
                    margin-bottom: 0;
                }
            }
        }
        .ContractSignature
        {
            display        : flex;
            width          : 100%;
            flex-direction : row;
            justify-content: space-between;
            position       : relative;
            font-size      : 14px;
            p
            {
                margin-bottom:5px;
            }
        }
    }

}
